<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Slider Kit > DelayCaptions add-on</title>
		<meta name="Keywords" content="photo gallery, carousel, external controls, pagination" />
		<meta name="Description" content="Slider Kit jQuery slideshow plugin: delay captions, sliding captions, extension" />
		
		<!-- jQuery library -->
		<script type="text/javascript" src="../lib/js/jquery/_oldies/jquery-1.3.min.js"></script>
		<!--<script type="text/javascript" src="../lib/js/jquery/jquery-1.6.2.min.js"></script>-->
		
		<!-- jQuery Plugin scripts -->
		<script type="text/javascript" src="../lib/js/jquery/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="../lib/js/jquery/jquery.mousewheel.min.js"></script>
		
		<!-- Slider Kit scripts -->
		<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.8.min.js"></script>		
		<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.min.js"></script>

		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
								
				/*---------------------------------
				 *	Example #01
				 *---------------------------------*/
				$(".delaycaptions-01").sliderkit({
					circular:false,
					mousewheel:true,
					keyboard:true,
					shownavitems:4,
					auto:false,
					fastchange:true,
					panelfxspeed:500,
					delaycaptions:{
						delay:500,
						position:"bottom",
						transition:"sliding",
						duration:300,
						easing:"easeOutExpo"
					},
					debug:1
				});

				/*---------------------------------
				 *	Example #02
				 *---------------------------------*/
				$(".delaycaptions-02").sliderkit({
					circular:false,
					mousewheel:true,
					keyboard:true,
					shownavitems:4,
					auto:true,
					circular:true,
					fastchange:false,
					autospeed:4000,
					panelfxspeed:800,
					delaycaptions:{
						delay:600,
						position:"top",
						transition:"sliding",
						duration:500,
						easing:"easeOutExpo",
						hold:true
					}
				});				
			});
		</script>
		
		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
		
		<!-- Slider Kit compatibility -->	
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
		<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->

		<!-- Site styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
	</head>
	<body>
				<div class="sliderkit photosgallery-captions delaycaptions-02">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-02.jpg" alt="[Alternative text]" /></a></li>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-03.jpg" alt="[Alternative text]" /></a></li>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-04.jpg" alt="[Alternative text]" /></a></li>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-05.jpg" alt="[Alternative text]" /></a></li>
								<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-06.jpg" alt="[Alternative text]" /></a></li>
							</ul>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>

						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-01.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-02.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
								</div>
								<div class="sliderkit-panel-overlay" style="background:red"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-03.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-04.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-04.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-05.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-05.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[title]"><img src="../lib/images/photos/sample-06.jpg" alt="[Alternative text]" /></a>
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<h4>sample-06.jpg</h4>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
					</div>
				</div>
	</body>
</html>